<template>
	<orh-table reload @on-reload="reloadData(pageDate.current_page)" pages :pageDate="pageDate" @on-page-change="queryData">

		<Input v-model="searchValue" @on-enter="searchSubmit" icon="ios-search" placeholder="请输入姓名" size="small" style="width: 200px; margin-left: 10px;" slot="returntosuperior"></Input>

		<Table slot="table" :data="TeacherList" :columns="columns1" :loading="loading"></Table>
		
		<orh-sidebar v-model="isShow" :title="titles" printer @on-printer="printingClick" cover slot="others">
			<information-detail v-if="show==1" class="printOrder-data" @showdetail="showdetail=>show=showdetail" :teacher_id="teacher_id" :user_id="user_id"></information-detail>
		</orh-sidebar>
	</orh-table>
</template>


<script>
	const PinyinMatch = require('pinyin-match');
	export default {
		name: 'teacher-inserviceinformation',
		components: {
			InformationDetail: resolve => {
				require(["$m/Teacher/TeacherInformation/InformationDetail.vue"], resolve);
			},
			Condition: resolve => {
				require(["./../Public/Condition.vue"], resolve);
			},
		},
		data() {
			return {
				TeacherList: [],
				user_id: null,
				teacher_id: "",
				loading: true,
				titles: null,
				pageDate: {
					total: 0,
					current_page: 1,
					per_page: 10
				},
				show: 0,
				isShow: false,
				columns1: [{
						title: '头像',
						width: 100,
						key: 'imgphotos',
						render: (h, params) => {
							return h('div', {
								attrs: {
									style: 'width: 80px;height: 80px;'
								},
							}, [
								h('img', {
									props: {
										type: 'primary',
										size: 'small'
									},
									attrs: {
										src: params.row.imgphotos != null ? params.row.imgphotos : 'http://1.180.78.87/dc/framework/common/images/noPic_150x150.jpg',
										style: 'width: 90%;height: 90%;border-radius: 2px;'
	
									},
									style: {},
								}),
							]);
						}
					},
					{
						title: "身份证号",
						// width: 150,
						key: "idcard"
					},
					{
						title: "姓名",
						// width: 120,
						render: (h, params) => {
							return h('span', params.row.teacher_name.zh ? params.row.teacher_name.zh : params.row.teacher_name.mn)
						}
					},
					{
						title: "性别",
						width: 60,
						render: (h, params) => {
							if(params.row.gender != null){
								return h('span', params.row.gender.zh ? params.row.gender.zh : params.row.gender.mn)
							}
						}
					},
					{
						title: "民族",
						width: 80,
						render: (h, params) => {
							if (params.row.nation != null) {
								return h('span', params.row.nation.zh ? params.row.nation.zh : params.row.nation.mn)
							}
	
						}
					},
					{
						title: "联系号码",
						// width: 120,
						key: "telnumber"
					},
					{
						title: "操作",
						key: "operation",
						width: 80,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												console.log(params.row, 'params')
												this.detail(params.index);
											}
										}
									},
									"查看"
								),
							]);
						}
					},
				],

				searchValue: ''
			};
		},
		methods: {

			// ==================================================
			// 查看
			// ==================================================
			detail(index) {
				this.isShow = true;
				this.titles = "详情";
				this.show = 1;
				this.user_id = `${this.TeacherList[index].id}`;
				this.teacher_id = `${this.TeacherList[index].teacher_id}`;
			},

			// ==================================================
			// 打印
			// ==================================================
			printingClick() {
				// 3. 还原：将旧的页面储存起来，当打印完成后返给给页面。
				var oldstr = document.body.innerHTML
				// 1.设置要打印的区域 div的className
				var newstr = document.getElementsByClassName('printOrder-data')[0].innerHTML
				// 2. 复制给body，并执行window.print打印功能
				document.body.innerHTML = newstr
				window.print()
				window.location.reload();
				document.body.innerHTML = oldstr
				return false
			},
			
			// ==================================================
			// 搜索操作
			// ==================================================
			searchSubmit () {
				this.queryData (1)
			},

			reloadData (page) {
				this.searchValue = ''
				this.queryData (page)
			},

			queryData (page) {
				let url = ''
				if (this.searchValue) {
					let obj = {
						zh: this.searchValue
					}
					url = `api/teacher/information/getWorkList?page=${page}&limit=10&teacher_name=${JSON.stringify(obj)}`
				} else {
					url = `api/teacher/information/getWorkList?page=${page}&limit=10`
				}
				this.$http.get(url).then(val => {
					this.TeacherList = val.data
					this.pageDate.total = val.count
					this.pageDate.per_page = val.limit
					this.pageDate.current_page = val.page
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			}
		},
		mounted() {
			this.queryData (1)
		}
	};
</script>




